[@main.layout title="form-demo - index"]

<h1>Form Demo</h1>

<p>A demonstration of many different form inputs. Validation on optional fields are executed only
if values are given. After a successful validation, the data will be reprinted on this page again. </p>

[#if submitSuccessful??]
<p>FormValues from a successful submit.</p>
<table border="1">
	[#list formData.multiValues?keys as fieldName]
	<tr>
		<td>${formData.fields[fieldName].label}</td>
		<td>
			<ul style="color: blue; list-style-type: none">
				[#list formData.multiValues[fieldName] as value]
				<li>${value}</li>
				[/#list]
			</ul>
		</td>
	</tr>
	[/#list]
</table>
<hr/>
[/#if]

<form name="${formData.formName}" action="${reqRoute.handlerPath}" method="post">
<table>

[#assign field = formData.fields['mytext1']]
<tr style="height: 35px; vertical-align: top">
	<td>${field.label}: </td>
	<td>
		<input type="text" name="${formData.formName}.${field.name}" 
			value="${formData.singleValues[field.name]}"/><span style="color: red;"> *</span>
	</td>
	<td>
		[#if formData.errors[field.name]??]
		<ul style="color:red; list-style-type: none">[#list formData.errors[field.name] as err]<li>${err}</li>[/#list]</ul>
		[/#if]
	</td>
</tr>

[#assign field = formData.fields['mytext2']]
<tr style="height: 35px; vertical-align: top">
	<td>${field.label}: </td>
	<td>
		<input type="text" name="${formData.formName}.${field.name}" 
			value="${formData.singleValues[field.name]}"/>
	</td>
	<td>
		[#if formData.errors[field.name]??]
		<ul style="color:red; list-style-type: none">[#list formData.errors[field.name] as err]<li>${err}</li>[/#list]</ul>
		[/#if]
	</td>
</tr>

[#assign field = formData.fields['mytext3']]
<tr style="height: 35px; vertical-align: top">
	<td>${field.label}: </td>
	<td>
		<input type="text" name="${formData.formName}.${field.name}" 
			value="${formData.singleValues[field.name]}"/>
	</td>
	<td>
		[#if formData.errors[field.name]??]
		<ul style="color:red; list-style-type: none">[#list formData.errors[field.name] as err]<li>${err}</li>[/#list]</ul>
		[/#if]
	</td>
</tr>

[#assign field = formData.fields['mytext4']]
<tr style="height: 35px; vertical-align: top">
	<td>${field.label}: </td>
	<td>
		<input type="text" name="${formData.formName}.${field.name}" 
			value="${formData.singleValues[field.name]}"/>
	</td>
	<td>
		[#if formData.errors[field.name]??]
		<ul style="color:red; list-style-type: none">[#list formData.errors[field.name] as err]<li>${err}</li>[/#list]</ul>
		[/#if]
	</td>
</tr>

[#assign field = formData.fields['mytext5']]
<tr style="height: 35px; vertical-align: top">
	<td>${field.label}: </td>
	<td>
		<input type="text" name="${formData.formName}.${field.name}" 
			value="${formData.singleValues[field.name]}"/>
	</td>
	<td>
		[#if formData.errors[field.name]??]
		<ul style="color:red; list-style-type: none">[#list formData.errors[field.name] as err]<li>${err}</li>[/#list]</ul>
		[/#if]
	</td>
</tr>

[#assign field = formData.fields['mypassword']]
<tr style="height: 35px; vertical-align: top">
	<td>${field.label}: </td>
	<td>
		<input type="password" name="${formData.formName}.${field.name}" 
		value="${formData.singleValues[field.name]}"/>
	</td>
	<td>
		[#if formData.errors[field.name]??]
		<ul style="color:red; list-style-type: none">[#list formData.errors[field.name] as err]<li>${err}</li>[/#list]</ul>
		[/#if]
	</td>
</tr>

[#assign field = formData.fields['myradio1']]
<tr style="height: 35px; vertical-align: top">
	<td>${field.label}: </td>
	<td>
		[#list field.multiValuesKeys as name]
		[#assign value = field.multiValues[name]]
		<input type="radio" name="${formData.formName}.${field.name}" value="${value}"
			[#if formData.multiValues[field.name]?size > 0 && formData.multiValues[field.name]?seq_contains(value)]
				checked="true"
			[/#if]
			/> ${name}
		[/#list]
		<span style="color: red;"> *</span>
	</td>
	<td>
		[#if formData.errors[field.name]??]
		<ul style="color:red; list-style-type: none">[#list formData.errors[field.name] as err]<li>${err}</li>[/#list]</ul>
		[/#if]
	</td>
</tr>

[#assign field = formData.fields['myradio2']]
<tr style="height: 35px; vertical-align: top">
	<td>${field.label}: </td>
	<td>
		[#list field.multiValuesKeys as name]
		[#assign value = field.multiValues[name]]
		<input type="radio" name="${formData.formName}.${field.name}" value="${value}"
			[#if formData.multiValues[field.name]?size > 0 && formData.multiValues[field.name]?seq_contains(value)]
				checked="true"
			[/#if]
			/> ${name}
		[/#list]
	</td>
	<td>
		[#if formData.errors[field.name]??]
		<ul style="color:red; list-style-type: none">[#list formData.errors[field.name] as err]<li>${err}</li>[/#list]</ul>
		[/#if]
	</td>
</tr>

[#assign field = formData.fields['mycheck1']]
<tr style="height: 35px; vertical-align: top">
	<td>${field.label}: </td>
	<td>
		[#list field.multiValuesKeys as name]
		[#assign value = field.multiValues[name]]
		<input type="checkbox" name="${formData.formName}.${field.name}" value="${value}"
			[#if formData.multiValues[field.name]?size > 0 && formData.multiValues[field.name]?seq_contains(value)]
				checked="true"
			[/#if]
			/> ${name}
		[/#list]
		<span style="color: red;"> *</span>
	</td>
	<td>
		[#if formData.errors[field.name]??]
		<ul style="color:red; list-style-type: none">[#list formData.errors[field.name] as err]<li>${err}</li>[/#list]</ul>
		[/#if]
	</td>
</tr>

[#assign field = formData.fields['mycheck2']]
<tr style="height: 35px; vertical-align: top">
	<td>${field.label}: </td>
	<td>
		[#list field.multiValuesKeys as name]
		[#assign value = field.multiValues[name]]
		<input type="checkbox" name="${formData.formName}.${field.name}" value="${value}"
			[#if formData.multiValues[field.name]?size > 0 && formData.multiValues[field.name]?seq_contains(value)]
				checked="true"
			[/#if]
			/> ${name}
		[/#list]
	</td>
	<td>
		[#if formData.errors[field.name]??]
		<ul style="color:red; list-style-type: none">[#list formData.errors[field.name] as err]<li>${err}</li>[/#list]</ul>
		[/#if]
	</td>
</tr>

[#assign field = formData.fields['mycheck3']]
<tr style="height: 35px; vertical-align: top">
	<td>${field.label}: </td>
	<td>
		[#list field.multiValuesKeys as name]
		[#assign value = field.multiValues[name]]
		<input type="checkbox" name="${formData.formName}.${field.name}" value="${value}"
			[#if formData.multiValues[field.name]?size > 0 && formData.multiValues[field.name]?seq_contains(value)]
				checked="true"
			[/#if]
			/> ${name}
		[/#list]
		<span style="color: red;"> *</span>
	</td>
	<td>
		[#if formData.errors[field.name]??]
		<ul style="color:red; list-style-type: none">[#list formData.errors[field.name] as err]<li>${err}</li>[/#list]</ul>
		[/#if]
	</td>
</tr>

[#assign field = formData.fields['myselect1']]
<tr style="height: 35px; vertical-align: top">
	<td>${field.label}: </td>
	<td>
		<select name="${formData.formName}.${field.name}">
		[#list field.multiValuesKeys as name]
		[#assign value = field.multiValues[name]]
		<option value="${value}"
			[#if formData.multiValues[field.name]?size > 0 && formData.multiValues[field.name]?seq_contains(value)]
				selected="true"
			[/#if]
			/> ${name} </option>
		[/#list]
		</select>
		<span style="color: red;"> *</span>
	</td>
	<td>
		[#if formData.errors[field.name]??]
		<ul style="color:red; list-style-type: none">[#list formData.errors[field.name] as err]<li>${err}</li>[/#list]</ul>
		[/#if]
	</td>
</tr>

[#assign field = formData.fields['myselect2']]
<tr style="height: 35px; vertical-align: top">
	<td>${field.label}: </td>
	<td>
		<select name="${formData.formName}.${field.name}" multiple="true" size="${field.multiValuesKeys?size}">
		[#list field.multiValuesKeys as name]
		[#assign value = field.multiValues[name]]
		<option value="${value}"
			[#if formData.multiValues[field.name]?size > 0 && formData.multiValues[field.name]?seq_contains(value)]
				selected="true"
			[/#if]
			/> ${name} </option>
		[/#list]
		</select>
	</td>
	<td>
		[#if formData.errors[field.name]??]
		<ul style="color:red; list-style-type: none">[#list formData.errors[field.name] as err]<li>${err}</li>[/#list]</ul>
		[/#if]
	</td>
</tr>

[#assign field = formData.fields['mytextarea']]
<tr style="height: 35px; vertical-align: top">
	<td>${field.label}: </td>
	<td>
		<textarea name="${formData.formName}.${field.name}" rows="3" cols="30">
			${formData.singleValues[field.name]}
		</textarea>
	</td>
	<td>
		[#if formData.errors[field.name]??]
		<ul style="color:red; list-style-type: none">[#list formData.errors[field.name] as err]<li>${err}</li>[/#list]</ul>
		[/#if]
	</td>
</tr>

<tr style="height: 35px; vertical-align: top">
	<td colspan="3"><input type="submit" value="Process Form"/></td>
</tr>

</table>
</form>

[/@main.layout]
